<template>
  <div
    class="flex cursor-pointer bg-c-white border border-c-grey-xs rounded-xl"
  >
    <div
      class="flex flex-1 gap-2.5 items-center justify-center pl-5 pr-6 py-[10px] bg-c-grey-xs rounded-xl"
      :class="[
        { 'bg-c-grey-xs': activeBlock === 'left' },
        { 'bg-transparent': activeBlock !== 'left' }
      ]"
      @click="$emit('update:value', 'left')"
    >
      <slot name="prefix-left-block-icon" />
      <div
        class="heading-s-medium"
        :class="[
          { 'text-c-grey-2xl': activeBlock === 'left' },
          { 'text-c-grey-xl': activeBlock !== 'left' }
        ]"
      >
        {{ leftBlockLabel }}
      </div>
    </div>
    <div
      class="flex flex-1 gap-2.5 items-center justify-center pl-5 pr-6 py-[10px] rounded-xl"
      :class="[
        { 'bg-c-grey-xs': activeBlock === 'right' },
        { 'bg-transparent': activeBlock !== 'right' }
      ]"
      @click="$emit('update:value', 'right')"
    >
      <slot name="prefix-right-block-icon" />
      <div
        class="heading-s-medium"
        :class="[
          { 'text-c-grey-2xl': activeBlock === 'right' },
          { 'text-c-grey-xl': activeBlock !== 'right' }
        ]"
      >
        {{ rightBlockLabel }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  leftBlockLabel: string
  rightBlockLabel: string
  value: 'left' | 'right'
}

const props = withDefaults(defineProps<Props>(), {
  leftBlockLabel: 'left',
  rightBlockLabel: 'right',
  value: 'left'
})

const { leftBlockLabel, rightBlockLabel, value } = toRefs(props)

const activeBlock = computed(() => value.value)
</script>

<style scoped></style>
